declare var console: any;

interface Logger {
	debug: (message?: any, ...optionalParams: any[]) => void;
	log: (message?: any, ...optionalParams: any[]) => void;
	warn: (message?: any, ...optionalParams: any[]) => void;
	error: (message?: any, ...optionalParams: any[]) => void;
	groupCollapsed: (oupTitle?: string, ...optionalParams: any[]) => void;
	groupEnd: () => void;
}

const loggers: { [name: string]: Logger } = {};
const noop = () => {};

const getLogger = (id = 'app') => {
	if (loggers[id]) {
		return loggers[id];
	}

	let inGroup = false;
	const methodToColorMap = {
		debug: `#7f8c8d`, // Gray
		log: `#2ecc71`, // Green
		warn: `#f39c12`, // Yellow
		error: `#c0392b`, // Red
		groupCollapsed: `#3498db`, // Blue
		groupEnd: '', // No colored prefix on groupEnd
	};

	const getlogPrefix = function (method: keyof Logger) {
		if (method === 'groupCollapsed') {
			// https://bugs.webkit.org/show_bug.cgi?id=182754
			if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
				return [];
			}
		}
		const styles = [
			`background: ${methodToColorMap[method]}`,
			`border-radius: 0.5em`,
			`color: white`,
			`font-weight: bold`,
			`padding: 2px 0.5em`,
		];
		const logPrefix = inGroup ? [] : [`%c${id}`, styles.join(';')];
		if (method === 'groupCollapsed') {
			inGroup = true;
		}
		if (method === 'groupEnd') {
			inGroup = false;
		}
		return logPrefix;
	};

	let logger: any = {};
	for (const method of Object.keys(methodToColorMap)) {
		const logPrefix = getlogPrefix(method as keyof Logger);
		logger[method] = __isDEV__ ? console[method].bind(console, logPrefix[0], logPrefix[1]) : noop;
	}

	return logger;
};

const logger: Logger = getLogger('website');

export default logger;

